<template>
  <div id="app">
    <!-- <h2>app</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subition">-</button>
    <hr />
    <h2>mutations外部传参</h2>
    <button @click="additionCounter(10)">+10</button>
    <hr />
    <h2>getters</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.powerNumCounter(3)}}</h2>
    <hr />
    <h2>actions</h2>
    <h2>{{$store.state.name}}</h2>
    <button @click="updateInfo">name改变</button>
    <hr />
    <h2>modules</h2>
    <h2>{{$store.state.a.name}}</h2>
    <hr />
    <hello-vuex /> -->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloVuex from "@/components/HelloVuex";
export default {
  name: "App",
  data() {
    return {
      message: "Hello world !"
    };
  },
  components: {
    HelloVuex
  },
  methods: {
    addition() {
      this.$store.commit("increment");
    },
    subition() {
      this.$store.commit("decrement");
    },
    additionCounter(num) {
      this.$store.commit("incrementCounter", num);
    },
    updateInfo() {
      // 1、普通写法
      // this.$store.dispatch("aUpdateInfo", {
      //   payload: "我是信息",
      //   success: () => {
      //     console.log("完成了");
      //   }
      // });

      // 2、promise写法
      this.$store.dispatch("aUpdateInfo", "携带的信息").then(res => {
        console.log("res===", res);
      });
    }
  }
};
</script>

<style>
</style>
